<template>
    <div class="container">

        <el-select v-model="selectDict" placeholder="Select">
            <el-option
                    v-for="item in dictList"
                    :key="item.dictTypeId"
                    :label="item.dictType"
                    :value="item.dictTypeId"
            >
            </el-option>
        </el-select>


        <el-button type="primary" icon="el-icon-plus" @click="add" class="right">新增</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="save" class="right">保存</el-button>


        <el-table :data="typeList" stripe style="width: 100%">
            <el-table-column prop="dictType" label="类型" width="180"/>
            <el-table-column label="名称" width="180">
                <template #default="scope">
                    <el-input v-model="scope.row.dictValue" v-bind:disabled="scope.row.lock">
                    </el-input>


                </template>

            </el-table-column>
            <el-table-column>
                <template #default="scope">

                    <el-button type="text" icon="el-icon-delete"
                               @click.prevent="deleteRow(scope.$index, typeList)">删除
                    </el-button>
                    <el-button type="text" icon="el-icon-edit"
                               @click.prevent="editRow(scope.$index, typeList)">编辑
                    </el-button>
                </template>

            </el-table-column>
        </el-table>
        <!--        <el-table :data="addList" style="width: 100%" v-show="addFlag">-->
        <!--            <el-table-column prop="dictType" label="类型" width="180"/>-->
        <!--            <el-table-column prop="dictValue" label="名称" width="180"/>-->
        <!--        </el-table>-->
    </div>


</template>

<script>
    import {ref, reactive} from 'vue'
    import {queryDictList, queryTypeList, saveDicts} from "../api/index";

    export default {
        name: "dict.vue",
        data() {
            return {
                // addList: [{dictId: "", dictType: "", dictTypeId: "", dictValue: ""}],
                addFlag: false,
                typeList: [],
                selectDict: '',

            }
        },
        setup() {
            const dictList = ref([]);
            queryDictList().then((res) => {
                dictList.value = res.data
                console.log(res)
            });

            return {
                dictList
            }
        },
        watch: {
            // whenever selectDict changes, this function will run
            selectDict(newValue, oldValue) {
                this.getTypeList(newValue)
            }
        },
        computer: {},

        methods: {
            getTypeList(dictTypeId) {
                queryTypeList(dictTypeId).then((res) => {
                    this.typeList = res.data
                    this.typeList.forEach(v => {
                        console.log(v)
                        v.lock = true
                    })
                    console.log(this.typeList)
                });
            },
            add(value) {
                let dictType
                this.dictList.forEach((v, i) => {
                    if (v.dictTypeId == this.selectDict) {
                        dictType = v.dictType
                    }
                })
                this.typeList.push({dictTypeId: this.selectDict, dictType: dictType, lock: false})
            },
            deleteRow(index, rows) {
                rows.splice(index, 1)
            },
            editRow(index, rows) {
                rows[index].lock = false;
                console.log(rows[index])
            },
            save() {
                saveDicts(this.typeList).then((res) => {
                })

            },
        }

    }
</script>

<style scoped>

</style>